<template>
  <div id="app">
    <div class="left">
      <div v-if="arr">
        <div
          v-for="(item, index) in arr"
          :key="index"
          style="width: 100%; height: 50px"
          @click="changeIndex(index)"
          :class="{'active':index==activeIndex}"

        >
          {{ item.title }}
        </div>
      </div>
    </div>

    <div class="right">
      <div class="ul" ref="ul">
        <div v-for="(item, index) in arr" :key="index" class="rightson">
          <div v-for="(ite, ind) in item.children" :key="ind">
            <h3>{{ ite.title }}</h3>
            <div class="wrap">
              <div v-for="(it, in1) in ite.children" :key="in1" class="li_div">
                <dl>
                  <dt>
                    <img :src="it.img" alt="" />
                  </dt>
                  <dd>{{ it.name }}</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import axios from "axios";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      arr: [],
      leftS: null,
      rightS: null,
      activeIndex:0
    };
  },
   methods:{
       changeIndex(index){
           this.activeIndex = index;
           console.log(this.$refs.ul.children[index])
             this.rightS.scrollToElement(this.$refs.ul.children[index],1000)
       }    
   },

  mounted() {
    var that = this
    axios.get("/list").then((res) => {
      this.arr = res.data;
      console.log(res.data);
      this.$nextTick(() => {
        // 让左侧滚动
        this.leftS = new BScroll(".left", {
          scrollY: true,
          click: true,
        });
        // 让右侧滚动
        this.rightS = new BScroll(".right", {
          scrollY: true,
          probeType: 3, // probeType 派发滚动事件，可以监听滚动
          // 值有四个
          // 0不监听
          // 1每隔一段时间监听一次
          // 2手机在手机上滑动时监听
          // 3只要页面还在滚动就会被监听
        });
        // 监听右侧滚动,让左侧高亮
        this.rightS.on("scroll",(e)=>{
            console.log(e)
            var shuzu = [... that.$refs.ul.children];
            shuzu.forEach((v, i) => {
            if (-e.y >= v.offsetTop) {
              that.activeIndex = i;
            }
          });
            // [...this.$refs.ul.children].fro
        })
      });
    });
  },
};
</script>



<style lang="scss">
// app里不能写scoped否则宽高样式无效
// * {
//   margin: 0;
//   padding: 0;
// }
// html,
// body {
//   width: 100%;
//   height: 100%;
// }
// #app {
//   width: 100%;
//   height: 100%;
//   display: flex;
// }
// .left {
//   width: 90px;
//   background: skyblue;
//   overflow: hidden;
// }
// .right {
//   flex: 1;
//   overflow: hidden;
// }
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  display: flex;
  .right {
    flex: 1;
    overflow: hidden;
  }
}
.left {
  width: 90px;
  background: skyblue;
  // overflow-y: auto;
  overflow: hidden;
}
.wrap {
  display: flex;
  flex-wrap: wrap;
}
.li_div {
  width: 33%;
}
h3 {
  background: #ccc;
}
.active {
    background: pink;
}
</style>




